{% extends "admin/login.html" %}
{% load static i18n simpletags %}

{% block css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static '/admin/simplepro/css/login.css' %}">
{% endblock %}

{% block bg %}
    <style type="text/css">
        .bg {
            background: #f0f2f5;
            background-image: url('{% static '/admin/simplepro/images/bg.svg' %}');
            min-height: 100%;
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 100%;
            padding: 20px 0;
            position: relative;
        }
        .container {
          display: flex;
          align-items: center; /* 垂直居中对齐 */
          justify-content: space-around;
        }

        .logo {
          width: 28%; /* 设置logo图片的宽度为父组件宽度的28% */
          max-width: 100px; /* 设置最大宽度，防止过大 */
          margin-right: 12px;
        }

        .title {
          flex: 1 0 68%; /* 让标题占据剩余空间的68% */
          white-space: nowrap; /* 不换行 */
          font-size: calc(16px + 1vw); /* 根据视口宽度自动调整字体大小 */
          margin-left: 12px;
        }

    </style>
{% endblock %}
{% block particles %}{% endblock %}
{% block logo %}
    <div class="banner">
            {% if "SIMPLEUI_LOGO"|get_config %}
                <img src="{{ "SIMPLEUI_LOGO"|get_config |safe }}">
            {% else %}
                <div class="container">
                    <img class="logo" src="{% static 'admin/simplepro/images/logo.png' %}">
                    <h1 class="title" >{{ site_header }}</h1>
                </div>
            {% endif %}
    </div>
{% endblock %}

{% block header %}
{% endblock %}

{% block icon %}
{#    <link rel="icon" href="{% static '/admin/simplepro/images/favicon.ico' %}">#}
{% endblock %}
{% block form %}
    <form class="simpleui-form" action="{{ app_path }}" method="post" id="login-form">
        {% csrf_token %}
        <div class="simpleui-input-inline">
            <el-input prefix-icon="el-icon-user" v-model="username" name="username"
                      placeholder="{% trans 'username' %}"></el-input>
        </div>
        <div class="simpleui-input-inline">
            <el-input prefix-icon="el-icon-lock" type="password" v-model="password" name="password"
                      @keyup.enter.native="login()"
                      placeholder="{% trans 'password' %}" show-password></el-input>
        </div>
        <div class="simpleui-input-inline login-btn">
            <el-button :icon="loading?'el-icon-loading':''" @click="login()"
                       type="primary">{% trans 'Log in' %}</el-button>
        </div>

        <input type="hidden" name="next" value="{{ next }}"/>
    </form>

{% endblock %}